<template>
  <el-dialog
    v-el-drag-dialog
    title="手机动态二维码上传"
    :visible.sync="visible"
    width="500px"
    append-to-body
  >
    <div ref="qrCodeUrl" class="qrcode" />
  </el-dialog>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import { queryUserAnnexList, queryUserAnnexListStatus } from '@/api'

  export default {
    name: 'PhoneUpload',
    data() {
      return {
        visible: false,
        id: ''
      }
    },
    created() {
      // this.init()
    },
    mounted() {
      this.init()
    },
    methods: {
      async open(limit, id) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          this.id = id
        })
      },
      init() {
        const uuid = '933786d3-72c8-4ac4-920c-34bda97afd8c'
        const casService = 'http://192.168.2.246:8080/html/upload/index.html'
        // 生成二维码
        // var codeUrl = casService + "/brower/selectUUID?uuid="+uuid;
        const codeUrl = casService + '?uuid=' + uuid
        // userCardFile_qrCode_win.current.qrcode.makeCode(codeUrl);
        this.creatQrCode(codeUrl)
        // 开启轮询
        this.checkingPay()
      },
      // 加载附件信息
      async getUserAnnex(id) {
        const res = await queryUserAnnexList({ id })
        // this.annexList = res.data
        this.$set(this, 'annexList', res.data)
      },
      // 轮询查看附件列表是否更新
      checkingPay() {
        const _this = this
        this.checkInterval = setInterval(function() {
          _this.selectFilelistStatus()
        }, 5000)
      },
      async selectFilelistStatus() {
        const res = await queryUserAnnexListStatus({
          id: this.id,
          sysAttachmentList: this.annexList
        })
        if (res.data) this.getUserAnnex(this.id)
      },
      creatQrCode(url) {
        console.log(this.$refs.qrCodeUrl, 11111111)
        new QRCode(this.$refs.qrCodeUrl, {
          text: url,
          width: 100,
          height: 100,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      }
    }
  }
</script>

<style scoped>

</style>
